<template>
    <div>
<!--        <van-field name="radio" label="区域类型" :rules="[{ required: true, message: '请选择区域类型' }]">-->
<!--            <template #input>-->
<!--                <van-radio-group v-model="formItem.area_type" direction="horizontal">-->
<!--                    <van-radio name="1" icon-size="18px">社区</van-radio>-->
<!--                    <van-radio name="2" icon-size="18px">村</van-radio>-->
<!--                </van-radio-group>-->
<!--            </template>-->
<!--        </van-field>-->
        <van-field
                readonly
                clickable
                name="area"
                :value="formItem.area.text"
                label="选择区域"
                placeholder="点击选择区/街道"
                @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
            <van-picker show-toolbar
                        title="选择区域"
                        @cancel="showArea=false"
                        @confirm="onSyAreaConfirm"
                        :columns="getSyAreaData"/>
        </van-popup>

<!--        <van-field-->
<!--                readonly-->
<!--                clickable-->
<!--                name="area"-->
<!--                v-show="getSyStreetData.length >0"-->
<!--                :value="formItem.street.text"-->
<!--                label="选择街道"-->
<!--                placeholder="点击选街道"-->
<!--                :rules="[{ required: true, message: '请选择街道' }]"-->
<!--                @click="showStreet = true"-->
<!--        />-->
<!--        <van-popup v-model="showStreet" position="bottom">-->
<!--            <van-picker show-toolbar-->
<!--                        title="选择街道"-->
<!--                        @cancel="showStreet=false"-->
<!--                        @confirm="onSyStreetConfirm"-->
<!--                        :columns="getSyStreetData"/>-->
<!--        </van-popup>-->

<!--        <van-field-->
<!--                readonly-->
<!--                clickable-->
<!--                name="area"-->
<!--                v-if="getSyCommunityData.length > 0 && formItem.area_type==1"-->
<!--                :value="formItem.community.text"-->
<!--                label="选择社区"-->
<!--                placeholder="点击选社区"-->
<!--                :rules="[{ required: true, message: '请选择社区' }]"-->
<!--                @click="showCommunity = true"-->
<!--        />-->
<!--        <van-popup v-model="showCommunity" position="bottom">-->
<!--            <van-picker show-toolbar-->
<!--                        title="选择社区"-->
<!--                        @cancel="showCommunity=false"-->
<!--                        @confirm="onSyCommunityConfirm"-->
<!--                        :columns="getSyCommunityData"/>-->
<!--        </van-popup>-->

<!--        <van-field-->
<!--                v-model="formItem.cunValue"-->
<!--                v-if="formItem.area_type==2"-->
<!--                name="cunValue"-->
<!--                label="现居乡村"-->
<!--                @focus="bodyScrollTop"-->
<!--                @blur="bodyScrollTop"-->
<!--                :rules="[{ required: true, message: '现居乡村不能为空' }]"-->
<!--                placeholder="请输入现居乡村"-->
<!--        />-->

        <!--<van-field
                v-model="formItem.address"
                name="name"
                label="居住小区"
                placeholder="请填写小区名称"
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"
                :rules="[{ validator: nameValidator,required: true, message: '请输入小区名称' }]"></van-field>-->
        <div class="suggest van-cell van-field">
            <div class="van-cell__title van-field__label">
                <span>居住地址:</span>
            </div><!--
            <div class="van-cell__value van-field__value">
                <div class="van-field__body">
                    <input type="text" :v-model="formItem.address" placeholder="请填写居住地址" class="van-field__control">
                </div>
            </div>-->
            <div class="van-cell__value" @click="mapChangeActionTrue">
                <template v-if="!mapSelectData.title">
                    <div class="address-placeholder">
                        <span>请选择您的居住地</span>
                    </div>
                </template>
                <template v-else>
                    <div class="address-box">{{mapSelectData.title}}</div>
                    <div class="address-box">{{ mapSelectData.province }}{{ mapSelectData.city }}{{
                        mapSelectData.address}}
                    </div>
                </template>
            </div>
        </div>

        <van-field
                v-model="formItem.house_num"
                type="text"
                label="门牌号码"
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"
                :maxlength="20"
                :rules="[{ required: true, message: '门牌号码不能为空' }]"
                placeholder="请输入门牌号码"
        >
        </van-field>

        <van-popup
                v-model="mapShow"
                closeable
                class="map-popup"
                :style="{ height: '90%',width:'95%',overflowX:'hidden', borderRadius: '10px', overflow: 'hidden' }"
        >
            <wl-baidu-map v-model="mapSelectData" @change="mapChangeAction"></wl-baidu-map>
        </van-popup>
    </div>
</template>

<script>
import mockData from '@/views/epidemic/epidemic-submit/data/mockData'
import WlBaiduMap from '@/components/wl-baidu-map/index'

export default {
  name: 'AreaPage',
  components: {
    WlBaiduMap
  },
  data () {
    return {
      formItem: {
        area_type: '',
        area: { text: '', id: '', company_code: '' },
        street: {},
        community: {},
        cunValue: '',
        house_num: ''
      },
      distData: mockData,
      mapSelectData: {
        point: {}
      },
      showArea: false,
      showStreet: false,
      showCommunity: false,
      mapShow: false
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    getSyAreaData () {
      let area = this.distData.areaList
      let app = []
      area.forEach(item => {
        app.push({ text: item.name, id: item.id, company_code: item.company_code })
      })
      return app
    },
    getSyStreetData () {
      let newStreetList = []
      let _this = this
      this.distData.streetList.forEach(item => {
        if (_this.formItem.area.id === item.pid) {
          let obj = {}
          obj.text = item.name
          obj.company_code = item.company_code
          obj.id = item.id
          newStreetList.push(obj)
        }
      })
      return newStreetList
    },
    getSyCommunityData () {
      let newStreetList = []
      this.distData.communityList.forEach(item => {
        if (this.formItem.street.id === item.pid) {
          let obj = {}
          obj.text = item.name
          obj.company_code = item.company_code
          obj.id = item.id
          newStreetList.push(obj)
        }
      })
      return newStreetList
    }
  },
  methods: {
    onSyAreaConfirm (value, index) {
      this.showArea = false
      this.formItem.area = value
      this.formItem.street = {}
      this.formItem.community = {}
    },
    onSyStreetConfirm (value, index) {
      this.showStreet = false
      this.formItem.street = value
      this.formItem.community = {}
    },
    onSyCommunityConfirm (value, index) {
      this.showCommunity = false
      this.formItem.community = value
    },
    mapChangeAction (data) {
      this.mapShow = false
      this.$emit('result')
    },
    mapChangeActionTrue (data) {
      this.mapShow = true
      winToTop()
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    bodyScrollTop () {
      winToTop()
      this.setStorage(this.formItem)
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    checkForm () {
      if (this.formItem.area_type === '') {
        this.failNotice('请选择区域类型')
        return false
      }
      if (this.$common.xeUtils.isEmpty(this.formItem.area)) {
        this.failNotice('请选择区!')
        return false
      }
      if (this.$common.xeUtils.isEmpty(this.formItem.street)) {
        this.failNotice('请选择街道!')
        return false
      }
      if (this.formItem.area_type === '1') {
        if (this.$common.xeUtils.isEmpty(this.formItem.community)) {
          this.failNotice('请选择社区!')
          return false
        }
      } else {
        if (this.$common.xeUtils.isEmpty(this.formItem.cunValue)) {
          this.failNotice('请输入村地址!')
          return false
        }
      }
      if (this.$common.xeUtils.isEmpty(this.mapSelectData.address)) {
        this.failNotice('请在地图搜索住所!')
        return false
      }
      // if (!this.formItem.address) {
      //   this.failNotice('请输入居住地址!')
      //   return false
      // }
      if (!this.formItem.house_num) {
        this.failNotice('请输入门牌号')
        return false
      }
      let resultData = this.formItem
      console.log('地图选择后回调', this.mapSelectData)
      resultData.address = this.mapSelectData.address
      resultData.title = this.mapSelectData.title
      resultData.province = this.mapSelectData.province
      resultData.city = this.mapSelectData.city
      resultData.lng = this.mapSelectData.point.lng
      resultData.lat = this.mapSelectData.point.lat
      return resultData
    },
    autoHandle () {
      // 地址
      this.mapSelectData.title = this.formData.loc_title
      this.mapSelectData.province = this.formData.loc_province
      this.mapSelectData.city = this.formData.loc_city
      this.mapSelectData.address = this.formData.loc_address
      this.mapSelectData.point.lng = this.formData.longitude
      this.mapSelectData.point.lat = this.formData.latitude
      // console.log('区域页面内部数据mapSelectData2', this.mapSelectData)
      // 门牌号
      this.formItem.house_num = this.formData.house_num
      // 区域处理
      if (this.formData.area_type === '1') {
        // 社区
        this.formItem.area_type = '1'
        this.formItem.area = { text: this.formData.area, id: parseInt(this.formData.area_id) }
        this.formItem.street = { text: this.formData.street, id: parseInt(this.formData.street_id) }
        this.formItem.community = {
          text: this.formData.community,
          id: parseInt(this.formData.community_id),
          company_code: this.formData.company_code
        }
      } else {
        this.formItem.area_type = '2'
        this.formItem.area = { text: this.formData.area, id: parseInt(this.formData.area_id) }
        this.formItem.street = {
          text: this.formData.street,
          id: parseInt(this.formData.street_id),
          company_code: this.formData.company_code
        }
        this.formItem.cunValue = this.formData.community
      }
    }
  },
  mounted () {
    console.log('初始化', this.formData)
  },
  watch: {
    formData (val) {
      this.autoHandle()
      console.log('区域信息组件内部表单`', this.formItem)
    }
  }
}
</script>

<style scoped>
    .address-placeholder {
        color: #969799;
    }

    .map-popup {
        overflow-y: scroll;
    }
</style>
